<template>
	<view>
		<u-navbar title="收货地址">
			<view slot="right" style="margin-right: 24rpx;" @click="$goto('/pages/address/add')">添加地址</view>
		</u-navbar>
		
		<view class="list flex-col align-center">
			<view class="item" v-for="i in list" :key="i.id">
				<view class="left">
					<view class="flex-row align-center u-line-1">
						<view class="icon" :class="{ active: i.is_default=='1' }"></view>
						<text class="name">{{i.name}}</text>
						<text class="phone">{{i.mobile}}</text>
					</view>
					<view class="address u-line-2">
						{{i.province + i.city + i.district + i.detail}}
					</view>
				</view>
				<view class="right" @click="$goto('/pages/address/edit?id=' + i.id)">
					编辑
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: []
			};
		},
		onShow() {
			this.getList();
		},
		methods: {
			getList() {
				this.$u.get('/address/list').then(res => {
					this.list = res.data.result.address
				})
			}
		}
	}
</script>

<style lang="scss">
	.item {
		width: 670rpx;
		height: 180rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: rgba(255,255,255,1);
		border-radius: 8rpx;
		margin-bottom: 32rpx;
		&:nth-of-type(1) {
			margin-top: 32rpx;
		}
		.left {
			width: 530rpx;
			padding: 0 32rpx 0 16rpx;
		}
		.right {
			width: 140rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-left: 4rpx solid #BFBFBF;
			text-align: center;
			font-size: 24rpx;
			font-family: PingFangSC-Regular,PingFang SC;
			font-weight: 400;
			color: rgba(153,153,153,1);
		}
		.icon {
			width: 32rpx;
			height: 32rpx;
			background: url(../../static/images/ad1.png);
			background-size: 100% 100%;
			margin-right: 8rpx;
			&.active {
				background: url(../../static/images/ad2.png);
				background-size: 100% 100%;
			}
		}
		.name {
			font-size: 28rpx;
			font-family: PingFangSC-Medium,PingFang SC;
			font-weight: 500;
			color: rgba(51,51,51,1);
			margin-right: 8rpx;
		}
		.phone {
			font-size: 24rpx;
			font-family: PingFangSC-Regular,PingFang SC;
			padding-top: 4rpx;
			font-weight: 400;
			color: rgba(102,102,102,1);
		}
		.address {
			margin-top: 16rpx;
			font-size: 24rpx;
			padding-left: 40rpx;
			font-family: PingFangSC-Regular,PingFang SC;
			font-weight: 400;
			color: rgba(102,102,102,1);
		}
	}
</style>
